import React from 'react';
import classNames from 'classnames';
import Pagination from '../../Pagination';
import Table from '../../Table';
import fetch from '../../utils/fetch';
import Spin from '../../Spin';
import './ListPage.less';

export default class ListPage extends React.Component {
    displayName = 'ListPage';

    static defaultProps = {
        pageSize: 10,
        bordered: true,
        pagination: true,
        showTotal: true,
        showJumper: true,
        showSizer: true
    }

    state = {
        data: null,
        loading: false,
        total: 0,
        current: 1,
        pageSize: 10
    }

    componentDidMount () {
        const {searchBtn, condition} = this.props;
        let btn = searchBtn;
        if (searchBtn && typeof searchBtn === 'function') {
            btn = this.props.searchBtn();
        }
        btn && btn.on('click', () => {
            this.doSearch();
        });

        if (condition) {
            if (typeof condition === 'function') {
                this.form = condition();
            } else {
                this.form = null;
                console.warning('condition 参数使用 function 参数');
            }
        }

        if (this.form) {
            if (this.form.displayName === 'Form') {
                const button = document.createElement('button');
                button.type = 'submit';
                button.style.display = 'none';
                this.form.form.appendChild(button);
                this.form.beforeSubmit = () => {
                    this.doSearch();
                    return false;
                };
                // if (this.props.autoSearch) {
                //     this.form.on('change', () => {
                //         window.setTimeout(() => {
                //             this.clickSearch();
                //         }, 0);
                //     });
                // }
            }
        }

        this.doSearch();
    }

    doSearch () {
        const pageSize = this.props.pageSize;
        this.search(1, pageSize);
    }

    getSearchParams (pageNum, pageSize) {
        let params = {
            pageNum ,
            pageSize
        };

        this.getParamsByConditionForm(params);

        if (this.props.searchParams) {
            if (typeof this.props.searchParams === 'function') {
                params = Object.assign(params, this.props.searchParams());
            } else {
                params = Object.assign(params, this.props.searchParams);
            }
        }

        // 去掉参数值后面的空格
        for (const key in params) {
            if (typeof params[key] == 'string') {
                params[key] = params[key].trim();
            }
        }

        return params;
    }

    getParamsByConditionForm (params) {
        if (this.form) {
            const formData = this.form.getFormParams();
            Object.assign(params, formData);
        }
    }

    search = async (pageNum, pageSize) => {
        const {action} = this.props;
        if (!action) {
            return;
        }
        try {
            this.setState({loading: true});
            const ret = await fetch(action, {json: this.getSearchParams(pageNum, pageSize)}).json();
            if (ret && ret.data) {
                this.setState({
                    data: ret.data,
                    total: ret.total,
                    current: ret.pageNum,
                    pageSize: ret.pageSize,
                    loading: false
                }, () => {
                    if (this.props.afterRequest) {
                        this.props.afterRequest(ret.data);
                    }
                });
            }
        } catch (e) {
            console.log(e);
            this.setState({
                data: [],
                loading: false
            });
        }
    }
    
    onSort = (column, sortType) => {
        
    }

    render () {
        const {className, style, bordered, maxHeight, striped, onChecked, onCheckedAll, 
            columns, pagination, showTotal, showJumper, showSizer} = this.props;
        const clazzName = classNames(className, 'cm-list-page');
        return <div className={clazzName} style={style}>
            <Table ref={f => this.table = f} maxHeight={maxHeight} 
                bordered={bordered} striped={striped}
                onChecked={onChecked} onCheckedAll={onCheckedAll}
                onSort={this.onSort}
                columns={columns || []} data={this.state.data || []}/>
            {
                pagination
                    ? <div className='cm-list-page-pagination'><Pagination ref={f => this.pagination = f} total={this.state.total} 
                        current={this.state.current} pageSize={this.state.pageSize}
                        showTotal={showTotal} showJumper={showJumper} showSizer={showSizer}/></div>
                    : null
            }
            {
                this.state.loading
                    ? <Spin type='oval' size={16}></Spin>
                    : null
            }
        </div>;
    }
}
